<script setup>
import voiceInputButton from "voice-input-button2";
import { Vue2InVue3 } from "@efox/emp-vuett";
import { ref } from "vue";
const emit = defineEmits();

const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");
const result = ref("");
const recordReady = function () {
  console.info("按钮就绪!");
};
const recordStart = function () {
  console.info("录音开始");
};
const showResult = function (text) {
  console.log(text);
  emit("voice-callback", text);
};
const recordStop = function () {
  console.info("录音结束");
};
const recordNoResult = function () {
  console.info("没有录到什么，请重试");
};
const recordComplete = function (text) {
  console.info("识别完成! 最终结果：", text);
};
const recordFailed = function (error) {
  console.info("识别失败，错误栈：", error);
};
</script>
<template>
  <div class="voice-input-button-wrapper">
    <div id="voice"></div>
    <ContentInVue3
      appId="5b578771"
      apiKey="aa36e3db77bb96fcf87ea812103e21a3"
      apiSecret="NmM2NmJjYzhmN2JlYzVlZTUzYmNkYjQ0"
      color="#fff"
      tipPosition="top"
      interactiveMode="touch"
      v-model="result"
      :record="showResult"
      :record-start="recordStart"
      :record-stop="recordStop"
      :record-blank="recordNoResult"
      :record-failed="recordFailed"
      :record-ready="recordReady"
      :record-complete="recordComplete"
    >
      <template v-slot:no-speak>没听清您说的什么</template>
    </ContentInVue3>
  </div>
</template>

<style lang="less" scoped>
.voice-input-button-wrapper {
  width: 42px;
  height: 42px;
  background-color: mediumpurple;
  border-radius: 50%;
  margin-right: 5%;
}
</style>
